<template>
  <view class="function-section">
    <view class="section-header">
      <view class="section-title">
        <view class="title-dot"></view>
        <text>业务功能</text>
      </view>
      <view class="section-more">
        <text>全部</text>
        <uni-icons type="right" size="14" color="#999"></uni-icons>
      </view>
    </view>
    <view class="function-grid">
      <view v-for="menu in visibleMenus" :key="menu.key" class="function-item" @click="handleMenuClick(menu)">
        <view class="function-icon" :style="{ background: menu.color + '15' }">
          <uni-icons :type="menu.icon" size="28" :color="menu.color"></uni-icons>
        </view>
        <text class="function-name">{{ menu.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getActiveModules } from '@/api/system/appmodule.js';
import storage from '@/utils/storage';
import constant from '@/utils/constant';

/**
 * 业务功能模块组件
 * 用于展示不同用户角色的业务功能菜单
 */
export default {
  name: 'business-func',
  components: {},
  props: {},
  data() {
    return {
      userRoles: [], // 用户角色信息
      menuConfig: [], // 菜单配置
      visibleMenus: [], // 可见菜单列表
    };
  },
  computed: {
    // 暂无计算属性
  },
  watch: {
    // 监听用户角色变化，更新可见菜单
    userRoles: {
      handler: function () {
        this.updateVisibleMenus();
      },
      deep: true,
    },
  },
  created() {
    // 组件创建时加载用户角色和菜单配置
    this.loadUserRoles();
    this.loadDynamicModules();
  },

  methods: {
    /**
     * 加载用户角色
     */
    loadUserRoles() {
      try {
        // 从存储中获取用户角色信息
        const roles = storage.get(constant.roles) || [];

        if (roles && roles.length > 0) {
          // roles可能是对象数组，需要提取roleKey
          this.userRoles = roles.map((role) => {
            if (typeof role === 'object' && role.roleKey) {
              return role.roleKey;
            }
            return role;
          });
        }
      } catch (error) {
        console.error('加载用户角色失败:', error);
      }
    },

    /**
     * 加载动态模块配置
     */
    async loadDynamicModules() {
      try {
        const response = await getActiveModules();
        if (response.code === 200 && response.data) {
          // 将后台配置转换为前端菜单格式
          const dynamicMenus = response.data
            .filter((module) => module.moduleType === '0')
            .map((module) => ({
              key: module.moduleKey,
              name: module.moduleName,
              icon: module.moduleIcon,
              color: module.moduleColor,
              path: module.pagePath,
              sortOrder: module.sortOrder,
              roles: this.getModuleRolesByKey(module.moduleKey), // 根据模块类型分配角色权限
              action: this.getActionByKey(module.moduleKey),
            }));

          // 合并动态菜单配置
          this.menuConfig = dynamicMenus;
          this.updateVisibleMenus();
        } else {
          // 如果获取失败，使用默认配置
          this.initMenuConfig();
        }
      } catch (error) {
        console.error('加载动态模块失败:', error);
        // 出错时使用默认配置
        this.initMenuConfig();
      }
    },

    /**
     * 根据模块key分配角色权限
     * @param {string} key - 模块key
     * @returns {Array} 角色列表
     */
    getModuleRolesByKey(key) {
      const roleMap = {
        // 商户专用功能（管理员也可以访问）
        supplier: ['merchant', 'admin'],
        merchant: ['admin', 'market_supervisor'], // 只有管理员可以管理商户
        goods: ['merchant', 'admin'],
        appointment: ['all'], // 所有角色都可以查看预约

        // 只有市场食品安全员可以审核
        audit: ['market_safety_officer'],

        // 查验相关功能
        check: ['entry_checker', 'inspector', 'market_safety_officer'],
        quicktest: ['inspector'], // 只有抽验员可以做快速检测
      };

      return roleMap[key] || ['admin']; // 默认只有管理员可见
    },

    /**
     * 根据模块key获取对应的action
     * @param {string} key - 模块key
     * @returns {string|null} 动作名称
     */
    getActionByKey(key) {
      const actionMap = {
        supplier: 'goToSupplier',
        merchant: 'goToMerchant',
        goods: 'goToGoods',
        appointment: 'goToAppointment',
        audit: 'goToAudit',
        check: 'handleScan',
        quicktest: 'goToQuickTest',
      };
      return actionMap[key] || null;
    },

    /**
     * 初始化菜单配置（默认配置）
     */
    initMenuConfig() {
      // 定义所有可能的菜单
      // 根据数据库中的角色定义进行配置
      const allMenus = [
        {
          key: 'appointment',
          name: '预约申请',
          icon: 'calendar',
          color: '#007AFF',
          roles: ['merchant'], // 入场销售者可见
          action: 'goToAppointment',
        },
        {
          key: 'scan',
          name: '扫码查验',
          icon: 'scan',
          color: '#52C41A',
          roles: ['entry_checker', 'market_safety_officer'], // 入场核验人员/市场食品安全员可见
          action: 'handleScan',
        },
        {
          key: 'records',
          name: '预约记录',
          icon: 'list',
          color: '#FF9500',
          roles: ['all'], // 所有角色可见
          action: 'goToRecords',
        },
        {
          key: 'supplier',
          name: '供货商管理',
          icon: 'shop',
          color: '#722ED1',
          roles: ['merchant', 'admin'], // 入场销售者和管理员可见
          action: 'goToSupplier',
        },
        {
          key: 'goods',
          name: '商品管理',
          icon: 'cart',
          color: '#13C2C2',
          roles: ['merchant', 'admin'], // 入场销售者和管理员可见
          action: 'goToGoods',
        },
        {
          key: 'audit',
          name: '预约审核',
          icon: 'checkbox',
          color: '#FA541C',
          roles: ['market_safety_officer'], // 只有市场食品安全员可见
          action: 'goToAudit',
        },
        {
          key: 'inspection',
          name: '抽检任务',
          icon: 'eye',
          color: '#FAAD14',
          roles: ['inspector'], // 抽验人员可见
          action: 'goToInspection',
        },
        {
          key: 'statistics',
          name: '数据统计',
          icon: 'bars',
          color: '#FA8C16',
          roles: ['admin', 'market_supervisor', 'food_safety_chief', 'market_safety_officer'], // 超管/市场监管局/食品安全总监/市场食品安全员可见
          action: 'goToStatistics',
        },
        {
          key: 'notice',
          name: '公告管理',
          icon: 'sound',
          color: '#1890FF',
          roles: ['admin', 'market_safety_officer'], // 超管/市场食品安全员可见
          action: 'goToNotice',
        },
        {
          key: 'merchant',
          name: '商户管理',
          icon: 'shop-filled',
          color: '#9254DE',
          roles: ['admin', 'market_safety_officer'], // 超管/市场食品安全员可见
          action: 'goToMerchant',
        },
        {
          key: 'check_records',
          name: '查验记录',
          icon: 'compose',
          color: '#52C41A',
          roles: ['entry_checker', 'inspector', 'market_safety_officer', 'admin'], // 入场核验人员/抽验人员/市场食品安全员/超管可见
          action: 'goToCheckRecords',
        },
        {
          key: 'quick_test',
          name: '检测录入',
          icon: 'compose',
          color: '#F5222D',
          roles: ['inspector', 'market_safety_officer'], // 抽验人员/市场食品安全员可见
          action: 'goToQuickTest',
        },
      ];

      this.menuConfig = allMenus;
      this.updateVisibleMenus();
    },

    /**
     * 更新可见菜单
     */
    updateVisibleMenus() {
      this.visibleMenus = this.menuConfig.filter((menu) => {
        // 超管可以看到所有菜单
        if (this.userRoles.includes('admin')) {
          return true;
        }

        // 检查菜单的角色限制
        if (menu.roles.includes('all')) {
          return true;
        }

        // 检查用户是否有对应角色
        return menu.roles.some((role) => this.userRoles.includes(role));
      });
    },

    /**
     * 处理菜单点击事件
     * @param {Object} menu - 菜单对象
     */
    handleMenuClick(menu) {
      if (menu.action && this[menu.action]) {
        this[menu.action]();
      } else {
        // 功能开发中
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        });
      }
    },

    /**
     * 跳转到预约申请
     */
    goToAppointment() {
      console.log('跳转到预约管理');
      // 根据角色跳转到不同页面
      const roles = this.userRoles || [];

      // 商户角色跳转到预约类型选择页面
      if (roles.includes('merchant')) {
        // 商户看到"预约管理"应该跳转到选择预约类型页面
        uni.navigateTo({
          url: '/pages/appointment/index', // 预约类型选择页面
        });
      }
      // 审核员角色跳转到审核管理页面
      else if (roles.includes('market_safety_officer')) {
        uni.navigateTo({
          url: '/pages/audit/list', // 审核管理页面
        });
      }
      // 入场核验员角色跳转到入场核验页面
      else if (roles.includes('entry_checker')) {
        uni.navigateTo({
          url: '/pages/check/entry', // 入场核验页面
        });
      }
      // 抽验员角色跳转到抽检任务列表页面
      else if (roles.includes('inspector')) {
        uni.navigateTo({
          url: '/pages/check/tasks', // 抽检任务列表页面
        });
      }
      // 默认跳转到预约记录页面
      else {
        uni.navigateTo({
          url: '/pages/appointment/record',
        });
      }
    },

    /**
     * 跳转到预约记录
     */
    goToRecords() {
      console.log('跳转到预约记录');
      uni.navigateTo({
        url: '/pages/appointment/record',
      });
    },

    /**
     * 跳转到供货商管理
     */
    goToSupplier() {
      console.log('跳转到供货商管理');
      uni.navigateTo({
        url: '/pages/supplier/list',
      });
    },

    /**
     * 跳转到商品管理
     */
    goToGoods() {
      uni.showToast({
        title: '商品管理功能开发中',
        icon: 'none',
      });
    },

    /**
     * 跳转到预约审核
     */
    goToAudit() {
      uni.navigateTo({
        url: '/pages/audit/list',
      });
    },

    /**
     * 跳转到抽检管理
     */
    goToInspection() {
      uni.navigateTo({
        url: '/pages/check/tasks',
      });
    },

    /**
     * 跳转到数据统计
     */
    goToStatistics() {
      uni.showToast({
        title: '统计功能开发中',
        icon: 'none',
      });
    },

    /**
     * 跳转到公告管理
     */
    goToNotice() {
      uni.navigateTo({
        url: '/pages/appointment/notice',
      });
    },

    /**
     * 跳转到商户管理
     */
    goToMerchant() {
      uni.showToast({
        title: '商户管理功能开发中',
        icon: 'none',
      });
    },

    /**
     * 跳转到查验记录
     */
    goToCheckRecords() {
      uni.navigateTo({
        url: '/pages/check/records',
      });
    },

    /**
     * 跳转到快速检测
     */
    goToQuickTest() {
      uni.navigateTo({
        url: '/pages/check/quicktest',
      });
    },

    /**
     * 解析扫码结果
     */
    parseScanResult(result) {
      try {
        // 检查是否是预约二维码
        // 支持多种格式：
        // 1. 自定义格式：ZHJG://VERIFY/?applyNo=xxx&applyId=xxx&code=xxx
        // 2. 小程序路径格式：/pages/check/verify?applyNo=xxx&applyId=xxx&code=xxx
        // 3. HTTP URL格式：http://xxx/qr?applyNo=xxx&applyId=xxx&code=xxx

        let isValidQr = false;
        let queryString = '';

        if (result.includes('ZHJG://VERIFY/')) {
          // 自定义格式
          isValidQr = true;
          const queryIndex = result.indexOf('?');
          if (queryIndex > -1) {
            queryString = result.substring(queryIndex + 1);
          }
        } else if (result.includes('/pages/check/verify')) {
          // 小程序路径格式
          isValidQr = true;
          const queryIndex = result.indexOf('?');
          if (queryIndex > -1) {
            queryString = result.substring(queryIndex + 1);
          }
        } else if (result.includes('/qr?') || result.includes('applyNo=')) {
          // HTTP URL格式或包含预约编号
          isValidQr = true;
          const queryIndex = result.indexOf('?');
          if (queryIndex > -1) {
            queryString = result.substring(queryIndex + 1);
          }
        }

        if (isValidQr && queryString) {
          const params = {};

          // 解析查询参数
          queryString.split('&').forEach((param) => {
            const [key, value] = param.split('=');
            if (key && value) {
              params[key] = decodeURIComponent(value);
            }
          });

          if (params.applyNo && params.code) {
            // 跳转到验证页面
            uni.navigateTo({
              url: `/pages/check/verify?applyNo=${params.applyNo}&applyId=${params.applyId || ''}&code=${params.code}`,
            });
          } else {
            uni.showToast({
              title: '二维码参数不完整',
              icon: 'none',
            });
          }
        } else {
          // 不是预期的二维码格式
          uni.showToast({
            title: '无效的二维码',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('解析二维码失败：', error);
        uni.showToast({
          title: '二维码解析失败',
          icon: 'none',
        });
      }
    },

    /**
     * 处理扫码功能
     */
    handleScan() {
      // #ifdef H5
      uni.showToast({
        title: 'H5端不支持扫码功能',
        icon: 'none',
      });
      // #endif
      // #ifdef MP-WEIXIN
      uni.scanCode({
        onlyFromCamera: false, // 允许从相册选择
        scanType: ['qrCode'], // 只扫描二维码
        success: (res) => {
          console.log('扫码结果：', res.result);
          // 解析扫码结果
          this.parseScanResult(res.result);
        },
        fail: (err) => {
          console.error('扫码失败：', err);
          uni.showToast({
            title: '扫码失败',
            icon: 'none',
          });
        },
      });
      // #endif
    },
  },
};
</script>

<style scoped>
/* 业务功能模块样式 */
.function-section {
  background: rgba(255, 255, 255, 0.95);
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.title-dot {
  width: 8rpx;
  height: 8rpx;
  background-color: #1890ff;
  border-radius: 4rpx;
  margin-right: 20rpx;
}

.section-more {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 24rpx;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  margin-top: 20rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
}

.function-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  line-height: 1.2;
}
</style>
